@mixin mode-light {
  --hbs-background: #{$gray-200};
  --hbs-on-background: var(--bs-dark);
  --hbs-surface: #{$white};
  --hbs-on-surface: var(--bs-dark);
  --hbs-primary-text: #{$dark-primary};
  --hbs-secondary-text: #{$dark-secondary};
  --hbs-disabled-text: #{$dark-disabled};
  --hbs-accent: var(--hbs-primary);
  --hbs-shadow: rgba(0, 0, 0, .075);
  --hbs-navbar-bg: var(--hbs-primary);
}

@mixin mode-dark {
  --hbs-background: #121212;
  --hbs-on-background: #{$white};
  --hbs-surface: #1e1e1e;
  --hbs-on-surface: #{$white};
  --hbs-primary-text: #{$white};
  --hbs-secondary-text: #{$white-secondary};
  --hbs-disabled-text: #{$white-disabled};
  --hbs-accent: var(--hbs-primary-light);
  --hbs-shadow: rgba(0, 0, 0, .75);
  --hbs-navbar-bg: var(--hbs-surface);
}

.mode-light {
  @include mode-light;
}

.mode-dark {
  @include mode-dark;
}

$bgLightMode: url("../images/icons/light.png");
$bgDarkMode: url("../images/icons/dark.png");
$mode-switcher-bg-image: $bgLightMode;
$mode-switcher-focus-bg-image: $bgLightMode;
$mode-switcher-checked-bg-image: $bgDarkMode;

#modeSwitcher {
  background-image: $mode-switcher-bg-image;
  height: 1.2rem;
  width: 2.5rem;   
  margin-bottom: .25rem;
}

#modeSwitcher:focus {
  background-image: $mode-switcher-focus-bg-image;
}

#modeSwitcher:checked {
  background-image: $mode-switcher-checked-bg-image;
}
